<template>
    <div>
        用户名：<input type="text" v-model="username"><br>
        密码： <input type="password" v-model="password"><br>
        <!--滑块验证码 -->
        <drag-verify
            width="300"
            height="40"
            text="请将滑块拖拽到右边"
            ref="Verify"
        >
        </drag-verify>
        <button @click="sub">登录</button><br>
        <img src="http://127.0.0.1:8000/static/dingding.png" @click="dingdinglogin">
        
    </div>   
</template>

<script>
import dragVerify from 'vue-drag-verify'
export default {
    data(){
        return {
            username:"",
            password:"",
        }
    },
    components:{
        "dragVerify":dragVerify
    },
    methods:{
        sub(){
            // 用户名是否为空
		  if(this.username == ""){
			  this.$Message('用户名不能为空')
			  return false
		  };
			// 密码是否为空
		  if(this.password == ""){
			  this.$Message('密码不能为空')
			  return false
		  };
            // 验证是否拖动
            if(this.$refs.Verify.isPassing == false){
				this.$Message('请拖动验证码')
				return false
			}


            this.axios({
                url:"http://127.0.0.1:8000/log",
                params:{
                    username:this.username,
                    password:this.password
                }
            })
            .then(res=>{
                this.$Message(res.data.message)
            })
        },
        dingdinglogin(){
            window.location.href = 'https://oapi.dingtalk.com/connect/qrconnect?appid=dingoasyyehyz5u1fzgmcv&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=http://127.0.0.1:8000/dingding_back'
        }
    }
}
</script>

<style>

</style>
